<template>
    <div class="middle">
        <ul>
            <li v-for="(item,index) in middleArr" :key="index"  @click="changed(index)">
                <h1>{{item.title}}</h1>
                <h3 v-show="item.isShow">{{ item.position }}</h3>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        name: "Middle",      
        // props: ["middleArr"],
        props: {
            middleArr:{
                type: Array
            },
            str:{
                type: String,
                default:"默认数据",
            },
            num:{
                type:Number,
                required:true,   //必须传递
                validator(value){   //自定义验证数据
                    return value >= 18 && value <= 65 ? true : false;
                }
            },
            changed:{
                type: Function,
                required:true
            }
        },
       
    }
</script>

<style scoped>
.middle ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    line-height: 80px;
}
.middle ul li{
    width: 260px;
    height: 180px;
    border: 1px dashed;
    margin: 20px;
    text-align: center;
}
.middle ul li:hover{
    background-color: rgb(207, 248, 248);
}
</style>